<template>
  <view class="app-container">
    <view class="flex-1 p-20" style="overflow-y: auto; position: relative">
      <template v-if="userStore.bankcardList.length">
        <view class="mb-20" v-for="(bank, index) in userStore.bankcardList" :key="index">
          <my-card-item :title="bank.bank.name" :code="bank.acc_number" :name="bank.name">
            <template #actions>
              <view class="">
                <u-button type="error" shape="circle" @click="handleUnbindBankcard(bank.id)">解绑</u-button>
              </view>
            </template>
          </my-card-item>
        </view>
      </template>
      <u-empty v-else text="无绑定银行卡"></u-empty>
      <view class="fb p-20">
        <view>
          <u-button type="primary" shape="circle" @click="handleToAddBankcard">添加绑定银行卡</u-button>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
  import { useUserStore } from "../../store/user";
  import { onShow } from "@dcloudio/uni-app";

  const userStore = useUserStore();

  function handleToAddBankcard() {
    if (userStore.bankcardList.length > 0) {
      uni.$u.toast("您已绑定银行卡");
    } else {
      uni.navigateTo({
        url: "/pages/add-bankcard/add-bankcard",
      });
    }
  }

  function handleUnbindBankcard(id) {
    uni.showModal({
      title: "提示",
      content: "是否继续解绑该银行卡",
      success: async (res) => {
        if (res.confirm) {
          await userStore.fetchUnbindBankcard({ id });
        }
      },
    });
  }

  onShow(async () => {
    await userStore.fetchBankcardList();
  });
</script>

<style lang="scss" scoped>
  .fb {
    width: 100%;
    box-sizing: border-box;
    position: absolute;
    bottom: 40rpx;
    left: 0;
  }
</style>
